<template>
    <section id="main">
        <div id="users" @click="tiaozhuan">
            <div id="userHeader"></div>
            <p>用户:{{user ? user.attributes.username:loginName}}</p>
            <!--<router-link :to="{ path: '/login'}" tag="div"> <p>{{ userName }}</p> </router-link>-->
        </div>
        <div class="list1">
            <router-link :to="{ path: '/index/message',query: {name:'我的留言',flag:'true'}}">  <mt-cell title="我的留言" value=">">

            </mt-cell></router-link>
            <router-link :to="{ path: '/index/myCollection',query: {name:'我的订单',flag:'true'}}">  <mt-cell title="我的订单" value=">">

            </mt-cell></router-link>
            <router-link :to="{ path: '/index/alluser',query: {name:'所有会员',flag:'true'}}"> <mt-cell title="所有会员" value=">"></mt-cell></router-link>
            <router-link :to="{ path: '/index/',query: {name:'我的主页',flag:'true'}}"> <mt-cell title="我的主页" value=">"></mt-cell></router-link>
        </div>
        <div class="list2">
            <router-link :to="{ path: '/index/myFollowee',query: {name:'我的关注',flag:'true'}}"> <mt-cell title="我的关注" value=">"></mt-cell></router-link>
            <router-link :to="{ path: '/index/myFollower',query: {name:'我的粉丝',flag:'true'}}"> <mt-cell title="我的粉丝" value=">"></mt-cell></router-link>
        </div>
        <div class="list3">
            <mt-cell title="设置" value=">"></mt-cell>
        </div>
    </section>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                loginName:'未登录，点击登陆'
            }
        },
        computed: mapState(['user']),
        mounted(){
            console.log(this.user);
        },
        methods:{
            tiaozhuan(){
                this.$router.push({ path: '/login' })
            }
        }
    }
</script>
<style>

#users{
    height:120px;
    background:rgba(41,148,83,0.7);
}
#userHeader{
    background:black;
    border-radius:40px;
    width:80px;
    height:80px;
    position:absolute;
    top:65px;
    left:20px;
}
#users p{
    font-size:20px;
    position:absolute;
    top:90px;
    left:120px;
}
.list1{
    height:80px;
    border-top:15px rgb(224,224,224) solid;
}
.list2{
    height:80px;
    margin-top:125px;
    border-top:15px rgb(224,224,224) solid;
}
.list3{
    height:80px;
    margin-top:30px;
    border-top:15px rgb(224,224,224) solid;
}
</style>

